<template>
    <div>
        <h1>{{ greeting }}</h1>
        <p>{{ message }}</p>
        <button @click="updateMessage">Update Message</button>
        <p>Count: {{ count }}</p>
        <button @click="incrementCount">Increment Count</button>
    </div>
</template>

<script>
export default {
    // 组件的名称（可选）
    name: "MyComponent",

    // 定义 props
    props: {
        initialMessage: {
            type: String,
            default: "Hello, Vue 3!",
        },
    },

    // 组件的数据
    data() {
        return {
            message: this.initialMessage,
            count: 0,
        }
    },

    // 计算属性
    computed: {
        greeting() {
            return `Welcome, ${this.message}`
        },
    },

    // 方法
    methods: {
        updateMessage() {
            this.message = "Message updated!"
        },
        incrementCount() {
            this.count++
        },
    },

    // 监听器
    watch: {
        count(newValue, oldValue) {
            console.log(`Count changed from ${oldValue} to ${newValue}`)
        },
    },

    // 生命周期钩子
    created() {
        console.log("Component created")
    },
    mounted() {
        console.log("Component mounted")
    },
    beforeUnmount() {
        console.log("Component will unmount")
    },
}
</script>

<style scoped>
h1 {
    color: #42b983;
}

button {
    margin: 5px;
    padding: 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #369f6e;
}
</style>
